<template>
  <view class="my ldBg">
    <view class="my_head">
      <view class="my_head_img">
        <image src="/static/sbky.jpg" mode="aspectFill" />
      </view>
    </view>
    <uni-list>
      <uni-list-item>
        <template v-slot:body>
          <view class="slotbox">
            <view class="orgName text">{{ userStore.orgName }}</view>
          </view>
        </template>
      </uni-list-item>
      <uni-list-item>
        <template v-slot:body>
          <view class="slotbox">
            <view class="name text"
              >{{ userStore.name }}（{{ userStore.phone }}）</view
            >
          </view>
        </template>
      </uni-list-item>
    </uni-list>
    <uni-list>
      <uni-list-item title="考试统计" link showArrow to="/pages/index/examData" />
    </uni-list>
    <FeedbackComponent />
    <uni-list>
      <uni-list-item title="修改密码" link showArrow to="/pages/my/pwd" />
      <uni-list-item
        title="系统支持"
        link
        showArrow
        clickable
        @click="showZc"
      />
      <uni-list-item title="退出登录" link showArrow clickable @click="out" />
    </uni-list>
    <!-- 图片弹窗 -->
    <view class="footer" @click="tShow">
      © 2024 陕北矿业有限公司信息技术运维分公司&nbsp;<span>运维支持</span>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import FeedbackComponent from "@/components/feedback/feedbackSys.vue";
import http from "@/utils/request.js";
import { onLoad, onPullDownRefresh } from "@dcloudio/uni-app";
import { useUserStore } from "@/stores/user";

const statis = reactive({
  // 首页统计
  jxZsExam: "", // 正在正式考试数量
  jxMockExam: "", // 正在模拟考试数量
  allMockExam: "", // 总模拟考试数量
  allZsExam: "", // 总正式考试数量
  resource: "", // 资源数量
  avgZsExam: "", // 平均正式考试分数
  avgMockExam: "", // 平均模拟考试分数
});
// 页面加载完毕，执行如下方法

// 定义变量
const userStore = useUserStore();
console.log(userStore);

// 退出登录
async function out() {
  let { code } = await http.post("login/out", {});
  if (code !== 200) {
    return;
  }
  uni.redirectTo({
    url: "/pages/login/login",
  });
}

/**
 * 弹出层，给出系统支持的图片
 */
async function showZc() {
  uni.previewImage({
    urls: ["../../static/concact.png"], // 图片地址列表
    current: "../../static/concact.png", // 当前显示图片的链接
  });
}

const tShow = () => {
  uni.previewImage({
    urls: ["../../static/concact.png"], // 图片地址列表
    current: "../../static/concact.png", // 当前显示图片的链接
  });
};
</script>

<style   lang="scss" scoped>
.my {
  .my-head {
    height: 200rpx;
    background-color: $uni-primary;
  }
  .my_head {
    background-color: #fff;
    width: 100%;
    height: 400rpx;
    image {
      width: 100%;
      /* 图片作为背景图，增加淡淡灰色蒙层*/
      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }
    /* 在图片的高度居中，左侧显示*/
  }
  .my_head_img {
    position: relative;
    width: 100%;
    height: 100%;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .my_head_text {
    position: absolute;
    top: 18%;
    left: 3%;
    transform: translateY(-50%);
    .center {
      display: flex;
      align-items: center;
    }
    text {
      color: #24b0fb;
      font-size: 36rpx;
    }
  }
  .uni-list-item {
    // margin-top: 20rpx;
  }
}
.slotbox {
  .text {
    font-size: 14px;
    // margin-bottom: 10rpx;
  }
}
.footer {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  position: fixed; /* 或 absolute，取决于你的布局需要 */
  bottom: 180rpx; /* 使其固定在底部 */
  left: 0;
  right: 0;
  height: 50rpx; /* 设置底部容器的高度 */
  font-size: 24rpx;
  color: #333;
  span {
    color: #24b0fb;
  }
}
.list_content ::v-deep .uni-list-item {
  font-size: 14px;
}
</style>